<template>
  <div class="tab" :style="{width: width}">
    <div class="tab-header">
      <slot name="header">
        <h1>{{ title }}</h1>
      </slot>
    </div>
    <div class="tab-main">
      <slot name="body" :tabs="tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{
            'tab-item': true,
            'tab-selected': index == currentTab.index,
          }"
          :style="{ width: tabWidth }"
          @click="tabClick(tab, index)"
        >
          <div>
            <slot name="tab" :tab="{ tab: tab, index: index }">
              <span>{{ tab.label }}</span>
            </slot>
          </div>
        </div>
        <p></p>
        <div v-if="hasTab()" class="tab-body">
          <slot :tab="currentTab">
            <span>{{ currentTab }}</span>
          </slot>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: {
        index: 0,
        tab: undefined,
      },
    };
  },
  methods: {
    tabClick(tab, index) {
      this.currentTab = {
        index: index,
        tab: tab,
      };
    },
    hasTab() {
      return this.tabs && this.tabs.length > 0;
    },
  },
  created() {
    if (!this.hasTab()) return;
    this.tabClick(this.tabs[this.current], this.current);
  },
  props: {
    title: String,
    tabs: Array,
    current: {
      type: Number,
      default: 0,
    },
    width: {
        type: String,
        default: "auto",
    },
    tabWidth: {
      type: String,
      default: "10%",
    },
  },
};
</script>

<style scoped>
.tab-header {
  position: relative;
  text-align: center;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 20px;
}

.tab-header > * {
  display: inline-block;
}

.tab {
  position: relative;
  width: 100%;
  height: inherit;
  margin: 0 auto;
}

.tab-main {
  text-align: center;
}

.tab-main > p {
  height: 1px;
  width: 100%;
  background: rgba(18, 19, 18, 0.116);
}

.tab-item {
  display: inline-block;
  font-size: 1.2em;
  padding: 5px;
  width: auto;
  cursor: pointer;
}

.tab-selected {
  border-bottom: 5px #0c5ca8 solid;
}

.tab-body {
  padding-top: 20px;
  position: relative;
  width: 100%;
}
</style>